<template>
  <div 
    :class="[
      'bx-empty',
      `bx-empty--${size}`
    ]"
  >
    <div class="bx-empty__image">
      <slot name="image">
        <svg 
          width="64" 
          height="64" 
          viewBox="0 0 64 64" 
          fill="none"
          class="bx-empty__default-image"
        >
          <rect 
            x="8" 
            y="16" 
            width="48" 
            height="32" 
            rx="4" 
            stroke="currentColor" 
            stroke-width="2" 
            fill="none"
          />
          <path 
            d="M16 32L24 24L32 32L40 24L48 32" 
            stroke="currentColor" 
            stroke-width="2" 
            fill="none"
            stroke-linecap="round" 
            stroke-linejoin="round"
          />
          <circle 
            cx="20" 
            cy="28" 
            r="2" 
            fill="currentColor"
          />
        </svg>
      </slot>
    </div>
    
    <div class="bx-empty__content">
      <div class="bx-empty__description">
        <slot name="description">
          {{ description }}
        </slot>
      </div>
      
      <div 
        v-if="$slots.default"
        class="bx-empty__actions"
      >
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BxEmpty',
  props: {
    description: {
      type: String,
      default: '暂无数据'
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  }
}
</script>

<style scoped>
.bx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  font-family: var(--bx-font-family);
}

.bx-empty--small {
  padding: 24px 16px;
}

.bx-empty--large {
  padding: 60px 24px;
}

.bx-empty__image {
  margin-bottom: 16px;
  color: var(--bx-text-tertiary);
  opacity: 0.6;
}

.bx-empty--small .bx-empty__image {
  margin-bottom: 12px;
}

.bx-empty--large .bx-empty__image {
  margin-bottom: 24px;
}

.bx-empty__default-image {
  width: 64px;
  height: 64px;
}

.bx-empty--small .bx-empty__default-image {
  width: 48px;
  height: 48px;
}

.bx-empty--large .bx-empty__default-image {
  width: 80px;
  height: 80px;
}

.bx-empty__content {
  max-width: 400px;
}

.bx-empty__description {
  color: var(--bx-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.bx-empty--small .bx-empty__description {
  font-size: 13px;
  margin-bottom: 12px;
}

.bx-empty--large .bx-empty__description {
  font-size: 16px;
  margin-bottom: 20px;
}

.bx-empty__actions {
  /* 操作按钮区域 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-empty {
    padding: 30px 16px;
  }
  
  .bx-empty--small {
    padding: 20px 12px;
  }
  
  .bx-empty--large {
    padding: 40px 20px;
  }
  
  .bx-empty__default-image {
    width: 56px;
    height: 56px;
  }
  
  .bx-empty--small .bx-empty__default-image {
    width: 40px;
    height: 40px;
  }
  
  .bx-empty--large .bx-empty__default-image {
    width: 72px;
    height: 72px;
  }
  
  .bx-empty__description {
    font-size: 13px;
  }
  
  .bx-empty--small .bx-empty__description {
    font-size: 12px;
  }
  
  .bx-empty--large .bx-empty__description {
    font-size: 15px;
  }
}
</style>

